<div class="container">
  <div [appHighlight]="color" defaultColor="violet">
    首页
  </div>
  <div>
    122
  </div>
  <div>
    <p>The hero's birthday is {{ birthday | date }}</p>
    <div>{{test_name | titleName}}</div>
  </div>

  <div [ngSwitch]="currentNum">
    <!-- <app-stout-item    *ngSwitchCase="'stout'"    [item]="currentItem"></app-stout-item>
  <app-device-item   *ngSwitchCase="'slim'"     [item]="currentItem"></app-device-item>
  <app-lost-item     *ngSwitchCase="'vintage'"  [item]="currentItem"></app-lost-item>
  <app-best-item     *ngSwitchCase="'bright'"   [item]="currentItem"></app-best-item>
  <app-unknown-item  *ngSwitchDefault           [item]="currentItem"></app-unknown-item> -->

    <div *ngSwitchCase="0">AAAA</div>
    <div *ngSwitchCase="1">BBBB</div>
    <div *ngSwitchCase="2">CCCCC</div>
    <div *ngSwitchCase="3">DDDDD</div>
    <div *ngSwitchDefault>AAAAAA</div>
  </div>

  <div>
	sdasdadadadad--------
    <p>ng-template使用</p>
    <ng-template>
      没有结构指令，当前的内容会被隐藏
    </ng-template>

    <p>ng-container使用</p>
    <div>你是<ng-container>陈大海</ng-container>吗</div>
  </div>

  <div>自定义结构指令</div>
  <p *appUnless="condition" class="unless a">
    (A) This paragraph is displayed because the condition is false.
  </p>
  <div><button (click)="condition=!condition">是否隐藏</button></div>

  <div>表达式上下文</div>
  <div>{{3+4}}</div>
  <div>
    <input type="text" #customerInput>
    <div>inpur值：{{customerInput.vlaue}}</div>
  </div>

  <button nz-button nzType="primary">
    <i nz-icon nzType="trophy"></i>
    NG-ZORRO-ANTD Playgroud
  </button>
</div>